// import cecharts, {ECOption} from '@/libs/echarts/echarts'
// import deepClone from '@/libs/deepClone'
// import {PropType,reactive, toRefs, ref, defineComponent, watch, computed,onMounted} from 'vue'

// export type SetOption = (data: ECOption) => void

// const CEcharts = defineComponent({
//   props: {
//     id: {
//       type: String,
//       required: true
//     },
//     width: {
//       type: String,
//       required: true
//     },
//     height: {
//       type: String,
//       required: true
//     },
//     option: {
//       type: Object as PropType<ECOption>
//     },
//     lazy: {
//       type: Boolean,
//       default: false
//     }
//   },
//   emits: {
//     // initEc: (ec: echarts.ECharts, setOption: SetOption, registerChinaMap: (data: any) => void): boolean => true
//     initEc: (ec: cecharts.ECharts, echarts: any): boolean => true
//   },
//   setup(props, {emit}) {
//     let ec: cecharts.ECharts | null = null

//     watch(
//       () => props.option,
//       n => {
//         if (props.lazy) return
//         let timer: any
//         timer = setInterval(() => {
//           if (ec) {
//             n && setOption(deepClone(n))
//             clearInterval(timer)
//           } else {
//             getEc()
//           }
//         }, 500)
//       },
//       {deep: true, immediate: true}
//     )

//     function getEc() {
//       const dom = document.getElementById(props.id)
//       window.removeEventListener('resize', resizeEchart)
//       if (dom) {
//         ec = cecharts.init(dom, undefined, {locale: 'ZH'})
//         // emit('initEc', ec, setOption, registerChinaMap)
//         window.addEventListener('resize', resizeEchart)
//         emit('initEc', ec, cecharts)
//       }
//     }

//     function setOption(n: ECOption, idx = 0) {
//       if (idx === 10) return
//       if (ec) {
//         ec.clear()
//         console.log('渲染开始了', props.id, n)
//         ec.showLoading({text: '加载中...'})
//         setTimeout(() => {
//           console.log('渲染结束了', props.id)
//           ec?.hideLoading()
//         }, 2000)
//         // ec.on('finished', () => {
//         //   console.log('渲染结束了', props.id);
//         //   ec?.hideLoading()
//         // })
//         ec.setOption(n)
//       } else {
//         getEc()
//         idx += 1
//         setOption(n, idx)
//       }
//     }
//     function resizeEchart() {
//       ec && ec.resize()
//     }

//     onMounted(() => {
//       getEc()
//     })
//     return () => (
//       <div
//         class='inline-block'
//         id={props.id}
//         style={{
//           width: props.width,
//           height: props.height
//         }}
//       ></div>
//     )
//   }
// })

// export default CEcharts
